<template>
	<div class="index">

    <div class="cainiaodibuanquan" style="position: fixed; left: 0; bottom: 0; width:100vw; font-size: 14px; background: #fff; z-index: 999; border-radius: 0.2rem 0.2rem 0 0; ">
       <div class="tabs_container">
         <router-link to="/cainiao" class="tabs_item">
           <div v-if="act == 1"><img src="../../../static/img/cainiao1.png"  /></div>
           <div v-if="act != 1"><img src="../../../static/img/cainiao11.png"  /></div>
           <div>首页</div>
         </router-link>
         <router-link to="/cainiao/dingdan" class="tabs_item">
           <div v-if="act == 2"><img src="../../../static/img/cainiao22.png"  /></div>
           <div v-if="act != 2"><img src="../../../static/img/cainiao2.png"  /></div>
           <div>订单</div>
         </router-link>
         <router-link to="/cainiao/kefu" class="tabs_item">
           <div v-if="act == 3"><img src="../../../static/img/cainiao33.png"  /></div>
           <div v-if="act != 3"><img src="../../../static/img/cainiao3.png"  /></div>
           <div>联系客服</div>
         </router-link>
       </div>
    </div>

	</div>
</template>

<script>
  var h = document.documentElement.clientWidth / 7.5 + 'px';
  document.documentElement.style.fontSize = h;
	export default {
		name: '客服',
		data() {
			return {
        act:1,
			}
		},
		created() {

		},
		mounted() {

      if(location.pathname.includes('dingdan')){
        this.act = 2
      }
      if(location.pathname.includes('kefu')){
        this.act = 3
      }

		},
		methods: {

		},

	}
</script>


<style scoped lang="less">

  .router-link-exact-active{ color: #005AFF;}

  .tabs_container{

    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    width: 100%;
    min-height: 1rem;
    display: flex;
    justify-content: space-around;
    font-size: 0.2rem;
    background: #fff;
    color: #666;
    img{
      width: 0.5rem;
      margin-bottom: 0.05rem;
    }
    .tabs_item{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
</style>
